<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        nav {
            height: 50px;
            width: 100%;
            background-color: #10c55b;
            line-height: 50px;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .nav-list-left {
            float: left;
        }

        .nav-list-right {
            width: 250px;
            float: right;
        }

        nav li {
            float: left;
        }

        .nav-list-left li a {
            height: 50px;
            padding: 0 16px;
            color: #afffd0;
        }

        .nav-list-left li:nth-child(1) {
            background-color: #01ac48;
        }

        .nav-list-left li:hover {
            background-color: #01ac48;
        }

        .nav-list-left span {
            display: inline-block;
            background-image: url(common.png);
            height: 12px;
            width: 14px;
            background-position: -125px -28px;
        }

        .nav-list-right a {
            color: #afffd0;
        }

        .nav-list-right li:nth-child(1) {
            padding: 0 10px;
        }

        .nav-list-right li:nth-child(1):hover {
            background-color: #01ac48;
        }

        .nav-list-right span {
            display: inline-block;
            background-image: url(common.png);
            height: 16px;
            width: 22px;
            margin-right: 7px;
            background-position: -35px -417px;
        }

        .nav-list-right .denglu {
            display: inline-block;

            line-height: 30px;
            text-align: center;
            color: white;
            border: 1px;
            border-radius: 5px;
            width: 57px;
            height: 30px;
            background-color: #01ac48;
            font-size: 13px;
        }

        .nav-list-right .denglu:hover {
            box-shadow: 0 0 3px #01923d;
        }

        .nav-list-right .zhuce {
            font-size: 12px;
            margin-left: 10px;
            color: #01923d;
        }
        .sousuo {
            width: 1200px;
            height: 65px;
            margin: 20px 0;
            display: flex;
        }
        .sousuo-right {
            width: 688px;
            margin-left: 90px;
        }

        .sousuo-top {
            width: 668px;
            height: 50px;
            padding: 10px 15px;
            border: 1px solid #10c55b;
            border-radius: 5px;
            display: flex;
            position: relative;
        }

        .sousuo-top .quanzhan {
            width: 62px;
            height: 30px;
        }

        .sousuo-top .quanzhan span {
            display: inline-block;
            background-image: url(common.png);
            height: 12px;
            width: 14px;
            background-position: -125px -28px;
        }

        .sousuo-top input {
            border: none;
            width: 500px;
        }

        .sousuo-top>a {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 80px;
            height: 50px;
            background-color: #10c55b;
        }

        .sousuo-top>a>span {
            width: 20px;
            height: 20px;
            display: inline-block;
            background-image: url(common.png);
            margin: 15px 30px;
            background-position: -65px -447px;
        }

        .sousuo-right>ul {
            margin-top: 5px;
        }

        .sousuo-right>ul>li {
            float: left;
            font-size: 13px;
            margin-left: 10px;
        }

        .sousuo-right>ul>li>a {
            color: black;
        }
  .lbt {
            width: 100%;
            height: 320px;
            background-color: #0a0a0a;
            position: relative;
        }

        .box {
            width: 1200px;
            height: 320px;
            margin: 0 auto;
            position: relative;
        }

        .img-list li {
            position: absolute;
        }

        .box img {
            width: 1200px;
            height: 320px;
            margin: 0 auto;
        }

        .box .img-list li {
            display: none;
        }

        .box .img-list li.current {
            display: block;
        }

        .indicator {
            position: absolute;
            left: 544px;
            bottom: 20px;
        }

        .indicator span {
            display: inline-block;
            width: 14px;
            height: 14px;
            background-color: #999;
            border-radius: 7px;
        }

        .img-click .prev {
            /*display: block;*/
            width: 50px;
            height: 100px;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.1);
            top: 90px;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }

        .img-click .next {
            display: block;
            width: 50px;
            height: 100px;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.1);
            top: 90px;
            right: 0px;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }

        .indicator span.active {
            background-color: #10c55b;
        }
   .main-one {
            width: 1200px;
            height: 31px;
            margin-top: 20px;
        }

        .fl {
            float: left;
        }

        .fl-title {
            float: left;
            margin-left: 30px;
            font-size: 14px;
        }

        .fl-title a {
            color: #999;
        }

        .fl-title a:hover {
            color: orange;
        }

        .click {
            float: right;
              color: #999;
              cursor: pointer;

        }
    .click:hover{
        color: orange;
    }

        .fl i {
            width: 30px;
            height: 30px;
            display: inline-block;
            background-image: url(common.png);
            margin-right: 10px;
            vertical-align: bottom;
            background-position: -96px -413px;
        }

        .fl p {
            margin: 0px;
            display: inline-block;
            height: 30px;
            font-size: 24px;
        }

        .jxzt {
            margin-top: 20px;
        }

        .jxzt-ul {
            display: flex;
            justify-content: space-between;
        }

        .jxzt li {
         
            position: relative;
        }


        .fl-title-ul li {
            float: left;
        }

        .fl-title-ul li a {
            margin-left: 30px;
        }

        .fugai {
            position: absolute;
            width: 290px;
            height: 200px;
             top: 0px;
        }

        .fugai-2 {
            position: absolute;
            width: 290px;
            height: 386px;

            top: 0px;
        }

        .jxzt .fugai:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .fugai-2:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .shuoming {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 45px;
            /*top: 100px;*/
            border-top: 1px solid white;
            border-bottom: 1px solid white;
            text-align: center;
            color: white;
            transition: all 0.3s linear;
            opacity: 0;
            overflow: hidden;
        }

        .syhb .content-list>li {
            height: 386px;
        }

        .corver-info {
            position: absolute;
            right: 20px;
            top: -90px;
            transition: all 0.3s;
            
        }

        .corver-info ul {
            display: flex;
            text-align: center;
        }

        .corver-info .download {
            width: 55px;
            height: 55px;
            background-image: url("common.png");
            background-position: 0 -55px;
        }

        .corver-info .heart {
            width: 55px;
            height: 55px;
            background-image: url("common.png");
            background-position: -55px -55px;
        }

        .corver-info .download:hover {
            background-position: 0 -111px;
        }

        .corver-info .heart:hover {
            background-position: -55px -111px;
        }

        .content-list>li:hover .corver-info {
            top: 20px;
        }

        .content-box {
            margin-top: 15px;
        }

        .content-title {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }

        .content-title h2 {
            font-weight: normal;
            font-size: 26px;
        }

        .content-title h2::before {
            content: '';
            display: inline-block;
            width: 40px;
            height: 30px;
            background-image: url("common.png");
            background-position: -90px -413px;
            position: relative;
            top: 5px;
        }

        .content-title>ul {
            width: 1000px;
            display: flex;
            justify-content: space-between;
            position: relative;
            top: 5px;
        }

        .content-title ul a {
            color: #aaa;
            top: 20px;
            font-size: 14px;
            position: relative;
        }
         .content-title ul a:hover{
            color: orange;
         }

        .content-list {
            display: flex;
            justify-content: space-between;
        }

        .content-list>li {
            width: 290px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }


        .footer {
            width: 1903px;
            height: 318px;
        }

        .footer-top {
            padding: 30px 0 0 18px;
            height: 263px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .l1 {
            width: 160px;
            height: 173px;
        }

        .l2 {
            width: 150px;
            height: 149px;
            right: 70px;
            position: relative;
        }

        .l3 {
            width: 150px;
            height: 149px;
            right: 150px;
            position: relative;
        }

        .l4 {
            width: 150px;
            height: 149px;
            right: 230px;
            position: relative;
        }


        .l1 dt {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }

        .l2 dt {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }

        .l3 dt {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }

        .l4 dt {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }

        .l1 a {
            font-size: 12px;
            line-height: 2;
            color: #888;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            margin-left: -40px;
        }

        .l2 a {
            font-size: 12px;
            line-height: 2;
            color: #888;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            margin-left: -40px;
        }

        .l3 a {
            font-size: 12px;
            line-height: 2;
            color: #888;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            margin-left: -40px;
        }

        .l4 a {
            font-size: 12px;
            line-height: 2;
            color: #888;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            margin-left: -40px;
        }

        .service {
            float: right;
            width: 310px;
            height: 187px;
        }

        .service-title {
            color: #666;

            cursor: pointer;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .service-title a {
            text-decoration: none;
            color: #666;
            text-decoration: none;
            cursor: pointer;
        }

        .service-tel {
            margin-bottom: 15px;
            color: #666;
            font-size: 18px;
        }

        .service-email {
            margin-bottom: 24px;
            color: #666;
            font-size: 18px;
        }

        .service-email a {
            text-decoration: none;
            color: #666;
        }

        .service-qq {
            width: 140px;
            height: 40px;
            line-height: 40px;
            background-color: #10c55b;
            text-align: center;
        }

        .service-qq a {
            text-decoration: none;
            color: white;
        }

        .footer-bottom {
            width: 1200px;
            height: 55px;
            margin: 0 auto;
        }

        .f1-href {
            padding-left: 14px;
        }

        .f1-href a {
            font-size: 12px;
            color: #888;
            text-decoration: none;
            padding-left: 14px;
        }

        .fl {
            float: center;
        }

        .f2-href {
            float: right;
            top: -40px;
            position: relative;
            left: 10px;
        }

        .f2-href a {
            font-size: 12px;
            color: #888;
            text-decoration: none;
        }

        .icon {
            width: 238px;
            height: 628px;
            display: inline-block;
            background-image: url(common.png);
        }

        .icon2 {
            width: 30px;
            height: 30px;
            background-position: -127px -415px;
            vertical-align: middle;
        }

        .icon3 {
            width: 30px;
            height: 30px;
            background-position: -96px -415px;
            cursor: pointer;
            margin-right: 10px;
        }

        .icon4 {
            width: 20px;
            height: 20px;
            background-position: -66px -446px;
            cursor: pointer;
            vertical-align: middle;
            margin-top: 15px;
            margin-left: 30px;
        }

        .icon5 {
            width: 53px;
            height: 53px;
            background-position: 0px 0px;
            cursor: pointer;
        }

        .icon6 {
            width: 26px;
            height: 26px;
            background-position: -65px -206px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 20px;
        }

        .icon7 {
            width: 26px;
            height: 26px;
            background-position: -35px -206px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 20px;
        }

        .icon9 {
            width: 23px;
            height: 25px;
            background-position: -163px -20px;
            vertical-align: middle;
            cursor: pointer;
        }

        .nei {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 53px;
            height: 53px;
        }
    </style>
</head>

<body>


    <nav>
        <div class="container">
            <ul class="nav-list-left">
                <li><a style="color:white; " href="#">首页</a></li>
                <li><a href="#">所有分类<span></span></a></li>
                <li><a href="#">设计创意</a></li>
                <li><a href="#">办公创意</a></li>
                <li><a href="#"><strong>·&nbsp;·&nbsp;·</strong></a></li>
            </ul>
            <ul class="nav-list-right">
                <li><a href="#"><span></span>VIP中心</a></li>
                <li><a class="denglu" href="">请登录</a></li>
                <li><a class="zhuce" href="">免费注册</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="sousuo">
            <a href="#"><img src="666.png" alt=""></a>

            <div class="sousuo-right">
                <div class="sousuo-top">
                    <div class="quanzhan">全站<span></span></div>
                    <input type="text" name="" value="" placeholder="  800万免费设计素材任意下载">
                    <a href="#"><span></span></a>
                </div>
                <div class="clear"></div>
                <ul>
                    <li>热门搜索：</li>
                    <li><a style="color: #10c55b;" href="#">七夕</a></li>
                    <li><a href="#">详情页</a></li>
                    <li><a style="color: #10c55b;" href="#">icon</a></li>
                    <li><a href="#">主图</a></li>
                    <li><a a style="color: #10c55b;" href="#">秋季</a></li>
                    <li><a href="#">PPT模板</a></li>
                    <li><a a style="color: #10c55b;" href="#">EXCEL模板</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">个人简历</a></li>
                    <li><a style="color: #10c55b;" href="#">装饰画</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="lbt">
        <div class="box">

            <ul class="img-list">
                <li class="current"><a href="#"><img src="banner6.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner5.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner8.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner4.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner7.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner1.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner3.jpg" alt=""></a></li>
                <li><a href="#"><img src="banner2.jpg" alt=""></a></li>
            </ul>

            <div class="indicator">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>

            </div>
        </div>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="main-one">
                <div class="fl">
                    <i></i>
                    <p>精选专题</p>
                </div>
                <div class="fl-title"><a href="#">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></div>
                <div class="click">更多 >></div>

            </div>
        </div>
        <div class="container">
            <div class="jxzt">
                <ul class="jxzt-ul jxzt-one">
                    <li>
                        <a href="#"><img src="jxzt01.jpg" alt="">
                            <div class="fugai">
                                <div class="shuoming">
                                    <h2>和啤酒有关</h2>
                                    <h5>啤酒是如何拯救世界的</h5>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="jxzt02.jpg" alt="">
                            <div class="fugai">
                                <div class="shuoming">
                                    <h2>爱的元素背景</h2>
                                    <h5>七夕到，让爱在土中发芽</h5>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="jxzt03.jpg" alt="">
                            <div class="fugai">
                                <div class="shuoming">
                                    <h2>鲜花背景精选</h2>
                                    <h5>为你的设计锦上添花</h5>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="jxzt04.jpg" alt="">
                            <div class="fugai">
                                <div class="shuoming">
                                    <h2>枫叶元素背景精选</h2>
                                    <h5>一叶而知秋</h5>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="syhb content-box">
                <div class="content-title">
                    <h2>商用海报</h2>
                    <ul>
                        <li><a href="#">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></li>
                        <li><a href="#">更多 >></a></li>
                    </ul>
                </div>
                <ul class="content-list">
                    <li>
                        <a href="#">
                        <img src="syhb01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="heart"></div>
                            <p>45</p>
                        </a>
                    </li>
                </ul>
            </div>
            </a>
            </li>
            <li>
                <a href="#">
                        <img src="syhb02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
            </li>
            <li>
                <a href="#">
                    <div class="heart"></div>
                    <p>45</p>
                </a>
            </li>
            </ul>
        </div>
        </a>
        </li>
        <li>
            <a href="#">
                        <img src="syhb03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
        </li>
        <li>
            <a href="#">
                <div class="heart"></div>
                <p>45</p>
            </a>
        </li>
        </ul>
    </div>
    </a>
    </li>
    <li>
        <a href="#">
                        <img src="syhb04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
    </li>
    <li>
        <a href="#">
            <div class="heart"></div>
            <p>45</p>
        </a>
    </li>
    </ul>
    </div>
    </a>
    </li>
    </ul>
    </div>
    </div>

    </div>

    <div class="footer">
        <div class="footer-top">
            <div class="l1">
                <dt>常见问题</dt>
                <dd><a href="">成为原创贡献者</a></dd>
                <dd><a href="">成为特邀设计师</a></dd>
                <dd><a href="">注册登录</a></dd>
                <dd><a href="">账号/密码</a></dd>
                <dd><a href="">充值/售后</a></dd>
                <dd><a href="">版权投诉</a></dd>
            </div>

            <div class="l2">
                <dt>关于千图网</dt>
                <dd><a href="">关于我们</a></dd>
                <dd><a href="">媒体报道</a></dd>
                <dd><a href="">加入我们</a></dd>
                <dd><a href="">心系千图</a></dd>
                <dd><a href="">每日更新</a></dd>

            </div>

            <div class="l3">
                <dt>产品服务</dt>
                <dd><a href="">官方博客</a></dd>
                <dd><a href="">帮助中心</a></dd>
                <dd><a href="">千图导航</a></dd>

            </div>



            <div class="l4">
                <dt>友情链接</dt>
                <dd><a href="">我图网</a></dd>
                <dd><a href="">千库网</a></dd>
                <dd><a href="">摄图网</a></dd>
                <dd><a href="">包图网</a></dd>
                <dd><a href="">视达网</a></dd>
                <dd><a href="">更多>></a></dd>

            </div>


            <div class="service">
                <p class="service-title">
                    <a href="">客服咨询</a>
                </p>

                <div class="service-tel">
                    <p>400-998-7011 <em>(9:00-18:00)</em></p>


                    <p class="service-email">
                        <a href="">feedback@58pic.com</a>
                    </p>


                    <p class="service-qq">
                        <a href="">点我交谈</a>
                    </p>
                </div>
            </div>

        </div>

        <div class="footer-bottom">
            <p class="f1-href">
                <span class="icon icon6"></span>
                <span class="icon icon7"></span>
                <a href="">注册声明</a>
                <a href="">版权声明</a>
                <a href="">售后服务</a>

                <p class="f2-href">
                    <a href="">        
                Copyright ©2013-2017 千图网</a>
                    <a href=""> 沪ICP备10011451号-6</a>
                    <span class="icon icon9">  </span>
                    <a href="">上海工商 安全实名验证 信用网站</a>
                </p>


            </p>


        </div>

    </div>


</body>

</html>
<script>
    window.onload = function () {
        var lbt = document.querySelector('.lbt');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorSpans = document.querySelectorAll('.indicator span');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var arr = ["rgb(9, 9, 9)", "rgb(255, 255, 15)", "rgb(253, 241, 0)",
            "rgb(48,156,255)", "rgb(137, 220, 228)", "rgb(255, 248, 196)",
            "rgb(16, 1,4)", "rgb(244, 202, 216)"
        ];
        var index = 0;

        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }

        function nextImg() {

            index = index == imgLis.length - 1 ? 0 : index + 1;
            // lbt.style.backgroundColor =this.dataset.color;
            showImg();
        }

        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorSpans[i].className = '';

            }
            // console.log(index);
            imgLis[index].className = 'current';
            indicatorSpans[index].className = 'active';
            lbt.style.backgroundColor = arr[index];
        }
        var timer = setInterval(nextImg, 1000);
        for (var i = 0; i < indicatorSpans.length; i++) {
            indicatorSpans[i].index = i;
            lbt.onmouseover = function () {
                clearInterval(timer);
                timer = null;
                console.dir(timer);
            }
            indicatorSpans[i].onclick = function () {
                index = this.index;
                showImg()
            }
            lbt.onmouseout = function () {
                if (timer) return;
                timer = setInterval(nextImg, 1000);
            }
        }
        next.onclick = function () {
            nextImg()

        }
        prev.onclick = function () {
            prevImg()
        }

        var imgs = document.querySelectorAll('.jxzt-one img');
        console.log(imgs);
        var fugais = document.querySelectorAll('.fugai');
        var shuomings = document.querySelectorAll('.shuoming')
        for (var i = 0; i < fugais.length; i++) {
            fugais[i].index = i

            fugais[i].onmouseenter = function () {
                shuomings[this.index].style.opacity = '1';
                shuomings[this.index].style.top = '50px';

            }
            fugais[i].onmouseleave = function () {

                shuomings[this.index].style.top = '100px';
                shuomings[this.index].style.opacity = '0';


            }
        }
        var xiaotu1 = document.querySelectorAll('.xiaotu-one');
        var xiaotu2 = document.querySelectorAll('.xiaotu-two');
        var fugais2 = document.querySelectorAll('.fugai-2');
        for (var i = 0; i < fugais2.length; i++) {
            fugais2[i].index = i

            fugais2[i].onmouseenter = function () {
                xiaotu1[this.index].style.opacity = '1';
                xiaotu1[this.index].style.top = '0';
                xiaotu2[this.index].style.opacity = '1';
                xiaotu2[this.index].style.top = '0';
            }
            fugais2[i].onmouseleave = function () {
                xiaotu1[this.index].style.opacity = '0';
                xiaotu1[this.index].style.top = '-10px';
                xiaotu2[this.index].style.opacity = '0';
                xiaotu2[this.index].style.top = '-10px'


            }
        }



    }
</script>